<template>
	<div class="validator">
		<div class="validator-box">
			<span>姓名：</span>
			<el-input class="input" placeholder="请输入用户姓名" v-model="userName"></el-input>
		</div>
		<br />
		<div class="validator-box">
			<span>手机号：</span>
			<el-input class="input" placeholder="请输入手机号" v-model.number="tell"></el-input>
		</div>
		<br />
		<el-button type="primary" @click="submit">validator</el-button>
	</div>
</template>

<script>
import { checkString, checkPhoneNumber } from '@/utils/validate';

export default {
	name: 'validator',
	data() {
		return {
			userName: '',
			tell: null,
		};
	},
	methods: {
		submit() {
			const rule = {
				userName: checkString('请输入正确的用户姓名'),
				tell: checkPhoneNumber('请输入正确的手机号'),
			};
			const params = { userName: this.userName, tell: this.tell };

			this.$validator(rule, params).then(() => {
				console.log('done');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.validator-box {
	display: flex;
	align-items: center;

	span {
		display: block;
		width: 100px;
	}
	.input {
		width: 300px;
	}
}
</style>
